<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <sc></sc>
       <hr>
       <st></st>
       <hr>
       <hel></hel>
       <hr>
       <ans></ans>
    </div>
</body>

<!-- 要注意几点，加入你在注册组件的时候取名多个单词，必须要用引号包起来，中间用-连接，比如'my-name'，但是像标签那样用的时候需要改成驼峰式<MyName></MyName> -->
<!-- 多个单词注册的时候就用大写字母需要你有脚手架(比如MyName,单个单词Name这样没事)，不然不行，会报错 -->
<!-- 组件一般情况用自闭合单标签也是可以的，但是没有脚手架你一下放很多个只显示一个 -->
<!-- 组件还有简化写法 -->
    <!-- const  组件名字 = Vue.extend(配置项)，简写后const 组件名 = 配置项  -->

    <!-- 在开发中有一个习惯。创建一个叫app的组件，管理应用中其他所有的组件，就是最父组件，其他组件放里面，这个组件一般放vm里 -->
<script>
    // 创建一个school组件
    const school = Vue.extend({
        // 组件中不要写el配置项，因为最后所有组件都要被一个vm管理，由vm决定服务于哪个容器
        // 组件中只能把data写成函数，不能写成对象
        data(){
            return {
               name:'东软',
               address:'成都'
           }
        },
        template:`<div><h2>学校名称:{{name}}</h2>
            <h2>学校地址:{{address}}</h2></div>`
    })


    // 创建student组件
    const student = Vue.extend({
        // 组件中不要写el配置项，因为最后所有组件都要被一个vm管理，由vm决定服务于哪个容器
        // 组件中只能把data写成函数，不能写成对象
        data(){
            return {
               name:'张傲',
               age:'23'
           }
        },
        template:`<div><h2>学生姓名:{{name}}</h2>
        <h2>学生年龄:{{age}}</h2></div>`
    })


    // 创建一个hello组件，待会儿弄成全局的
    const hello = Vue.extend({
        template:`<h1>你好啊</h1>`,
        // 组件里面有个配置项叫name，只要你设置了。你注册时候只能叫这个，不然报错
        name:'hel',
       
    })


    // 全局注册也是先使用时候的名字，再创建时候的名字
    Vue.component('hel',hello)


        // 简写的组件
        const ans = {
        template:`<h1>我是渣渣灰</h1>`
    }
    // 使用组件三步骤1.创建组件2.注册组件3.使用组件



    Vue.config.productionTip = false;
    const vm = new Vue({
        el:'#root',
        data:{
           
        },
        // 组件注册到里面,这属于局部注册，局部注册只能给一个vm使用
        components:{
            // 注册时   你使用时候的名字:你创建组件时候的名字
            sc:school,
            st:student,
             // 下面因为注册跟创建名字一样，直接简写
        ans

        }
    })
    


</script>
</html>